<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
                <el-breadcrumb-item>Vue表格组件</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="plugins-tips">
            vue-datasource：一个用于动态创建表格的vue.js服务端组件。
            访问地址：<a href="https://github.com/coderdiaz/vue-datasource" target="_blank">vue-datasource</a>
        </div>
        <datasource language="en" :table-data="getData" :columns="columns" :pagination="information.pagination"
                :actions="actions"
                v-on:change="changePage"
                v-on:searching="onSearch"></datasource>
    </div>
</template>

<script>
    import axios from 'axios';
    import Datasource from 'vue-datasource';
    export default {
        data: function(){
            const self = this;
            return {
                url: './static/datasource.json',
                information: {
                    pagination:{
                        "total": 15,
                        "per_page": 15,
                        "current_page": 1,
                        "last_page": 1,
                        "from": 1,
                        "to": 15
                    },
                    data:[{
                            "id": 1,
                            "name": "段娜",
                            "email": "g.rgiuory@kctbut.mw",
                            "ip": "68.28.4.232"
                        },
                        {
                            "id": 2,
                            "name": "蔡洋",
                            "email": "y.mwjjoje@lpkshev.tg",
                            "ip": "22.126.12.189"
                        },
                        {
                            "id": 3,
                            "name": "陈敏",
                            "email": "e.voaiiuo@mvng.sn",
                            "ip": "227.89.13.37"
                        },
                        {
                            "id": 4,
                            "name": "朱平",
                            "email": "e.lduuf@nkfypn.az",
                            "ip": "9.39.240.243"
                        },
                        {
                            "id": 5,
                            "name": "侯平",
                            "email": "t.czqjyndts@jmwenklns.md",
                            "ip": "178.162.29.113"
                        },
                        {
                            "id": 6,
                            "name": "常超",
                            "email": "d.dhysgem@uxpcutmlk.tt",
                            "ip": "192.50.103.170"
                        },
                        {
                            "id": 7,
                            "name": "许平",
                            "email": "g.fiqdonvbc@wanepptw.tv",
                            "ip": "73.20.99.60"
                        },
                        {
                            "id": 8,
                            "name": "毛超",
                            "email": "w.unyyejh@qus.gt",
                            "ip": "10.88.135.123"
                        },
                        {
                            "id": 9,
                            "name": "周磊",
                            "email": "e.qbejguqqg@ejpxhltoak.gw",
                            "ip": "244.221.237.210"
                        },
                        {
                            "id": 10,
                            "name": "胡秀英",
                            "email": "s.dszo@uxaojtj.sy",
                            "ip": "86.199.17.210"
                        }
                    ]
                },
                columns: [
                    {
                        name: 'Id',
                        key: 'id',
                    },
                    {
                        name: 'Name',
                        key: 'name',
                    },
                    {
                        name: 'email',
                        key: 'email',
                    },
                    {
                        name: 'ip',
                        key: 'ip',
                    }
                ],
                actions: [
                    {
                        text: 'Click',
                        class: 'btn-primary',
                        event(e, row) {
                            self.$message('选中的行数： ' + row.row.id);
                        }
                    }
                ],
                query:''
            }
        },
        components: {
            Datasource
        },
        methods: {
            changePage(values) {
                this.information.pagination.per_page = values.perpage;
                this.information.data = this.information.data;
            },
            onSearch(searchQuery) {
                this.query = searchQuery;
            }
        },
        computed:{
            getData(){
                const self = this;
                return self.information.data.filter(function (d) {
                    if(d.name.indexOf(self.query) > -1){
                        return d;
                    }
                })
            }
        },
        beforeMount(){
            // if(process.env.NODE_ENV === 'development'){
            //     this.url = '/ms/table/source';
            // };
            // axios.get(this.url).then( (res) => {
            //     this.information = res.data;
            // })
        }
    }
</script>

<style src="../../../static/css/datasource.css"></style>